<!-- 房屋信息页面组件 -->
<template>
  <div>
    <el-tabs v-model="activeName" type="card" stretch>
      <el-tab-pane label="房屋信息" name="first">
        <div v-if="houseInfo.data"><!--数据先进了渲染，异步任务还没有开始,要在updata获取-->
        <p style="font-weight:bold;font-size:1.1rem;margin:0">{{houseInfo.data.title}}</p>
        <div id="info">
          <div>
            <p style="color:red">{{houseInfo.data.price}}</p>
            <p>租金</p>
          </div>
          <div>
            <p style="color:red">{{houseInfo.data.info.type}}</p>
            <p>房型</p>
          </div>
          <div>
            <p style="color:red">{{houseInfo.data.houseType}}</p>
            <p>面积</p>
          </div>
        </div>
        <div id="details">
            <p style="margin-bottom:0">楼层：{{houseInfo.data.info.level}}</p>
            <p style="margin-bottom:0">装修:{{houseInfo.data.info.style}}</p>
            <p style="margin-bottom:0">类型：{{houseInfo.data.info.type}}</p>
            <p style="margin-bottom:0">朝向：{{houseInfo.data.info.orientation}}</p>
            <p class="last">年代：{{houseInfo.data.info.years}}</p>
        </div>
        </div>

        <el-button type="danger" 
        style="width:42vw;
        height: 6.9vh;
        font-size: 1.1rem;
        letter-spacing: 0.1rem;"
        :style="{backgroundColor:(isChecl?'gray':'red'),borderColor:(isChecl?'gray':'red')}"
        @click="Collection">{{cellotion}}</el-button>

        <el-button type="danger" 
        style="width:42vw;
        height: 6.9vh;
        font-size: 1.1rem;
        letter-spacing: 0.1rem">{{Books}}</el-button>
      </el-tab-pane>

      <el-tab-pane label="房屋评价" name="second">
        <div id="newDiss">
          <div id="discuss" v-for="(item,index) in dissInfo" :key="index">
            <div class="phone"><i class="el-icon-user-solid"></i>{{item.username}}</div>
            <div class="star">评分：<i class="el-icon-star-on" v-for="item2 in item.star" :key="item2" style="color:red"></i></div>
            <div class="commed">{{item.comment}}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      houseInfo: {},
      dissInfo:[],
      dissInfo2:[],
      cellotion:"收藏",
      Books:"预定",
      isChecl:false
    };
  },
   async created() {//注意异步获取数据
    const re = await axios.get("http://localhost:3000/details");
    const re2 = await axios.get("http://localhost:3000/discuss");
    this.houseInfo = re;
    this.dissInfo=re2.data
    this.dissInfo2=re2.data
    console.log(this.dissInfo)
  },
  methods: {
    Collection(){//点击收藏按钮变化
      if(this.cellotion=="收藏"){
        this.cellotion="取消收藏"
        this.isChecl=true
      }
      else{
        this.cellotion="收藏"
        this.isChecl=false
      }
    },
  },
    mounted() {//实现页面的长加载和循环
    let netThis=this;
    let numberGrou=0;
    let number2=0
    console.log(121321)
    console.log()
  document.getElementById("newDiss").addEventListener("scroll", function(){
       numberGrou=Math.floor(this.scrollTop/700);//视口宽度，一定要元素设定高度，不然没效果
      if(numberGrou==number2){
        console.log("我行动了")
           netThis.dissInfo=Array.from(netThis.dissInfo).concat(netThis.dissInfo2)//这里存在伪数组，注意转换
           number2++;//反复判断
      }
    }, true);
  },
};
</script>

<style lang="less" scoped>
#info{
    width: 100vw;
    display: flex;
    justify-content: space-around;
    border: 1px solid rgb(219, 215, 215);
    border-radius: 2%;
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
    transform: scale(0.9);
}
#details{
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    justify-content: space-between;
    font-weight:400;
    p{
        width: 40vw;
    }
}
#newDiss{
  overflow-y: scroll;
  height: 600px;
}
#discuss{
  height: 16.5vh;
  text-align: left;
  border-bottom:1px solid rgb(196, 194, 194);
  padding: 2vh 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .phone{
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  div{
    padding: 1vw;
    width: 98vw;
  }
}
</style>